<!--eslint-disable-->
<template>
    <div class="app">
        <div class="title">
            <p class="webtitle">电e柜运管平台</p>
            <p id="dateLabel" class="date">{{ this.nowShijian }}</p>
            <SegmentComponent 
                style="
                    display: block;
                    position: absolute;
                    right: 0.8%;
                    top:calc((100% - 90px) / 1);
                    width: 180px;
                    height: 45px;"></SegmentComponent>
            <date-picker 
                style="
                    display: block;
                    position: absolute;
                    right: 0.8%;
                    top:calc((100% - 40px) / 1);
                    width: 300px;
                    height: 45px;"></date-picker>
        </div>
        <div class="index">
            <img class="guangdian" src="../assets/image/faguangdian@1x.png" alt="">
            <p class="titleLabel">运行情况</p>
            <div class="jiaofeidiv">
                <img class="divlogo" src="../assets/image/jiaofei@1x.png" alt="">
                <p class="jelabel">
                    <span class="jelabeltitle">金额：</span>
                    <span class="jelabeldata">1,111,222.28</span>
                    <span class="jelabelunit">元</span>
                </p>
                <p class="bsLabel">
                    <span class="bslabeltitle">笔数：</span>
                    <span class="bslabeldata">65437</span>
                    <span class="bslabelunit">笔</span>
                </p>
            </div>
            <div class="xianjindiv">
                <img class="divlogo" src="../assets/image/xianjin@1x.png" alt="">
                <p class="jelabel">
                    <span class="jelabeltitle">金额：</span>
                    <span class="jelabeldata">1,111,222.28</span>
                    <span class="jelabelunit">元</span>
                </p>
                <p class="bsLabel">
                    <span class="bslabeltitle">笔数：</span>
                    <span class="bslabeldata">65437</span>
                    <span class="bslabelunit">笔</span>
                </p>
                
            </div>
            <div class="shuakadiv">
                <img class="divlogo" src="../assets/image/shuaka@1x.png" alt="">
                <p class="jelabel">
                    <span class="jelabeltitle">金额：</span>
                    <span class="jelabeldata">1,111,222.28</span>
                    <span class="jelabelunit">元</span>
                </p>
                <p class="bsLabel">
                    <span class="bslabeltitle">笔数：</span>
                    <span class="bslabeldata">65437</span>
                    <span class="bslabelunit">笔</span>
                </p>

            </div>
            <div class="saomadiv">
                <img class="divlogo" src="../assets/image/saoma@1x.png" alt="">
                <p class="jelabel">
                    <span class="jelabeltitle">金额：</span>
                    <span class="jelabeldata">1,111,222.28</span>
                    <span class="jelabelunit">元</span>
                </p>
                <p class="bsLabel">
                    <span class="bslabeltitle">笔数：</span>
                    <span class="bslabeldata">65437</span>
                    <span class="bslabelunit">笔</span>
                </p>

            </div>

        </div>
        <div class="jiankong">
            <img class="guangdian" src="../assets/image/faguangdian@1x.png" alt="">
            <p class="titleLabel">解款监控</p>
            <line-chart 
                style="
                    position: absolute;
                    display: block;
                    left: 0px;
                    right: 0px;
                    top: 40px;
                    bottom: 5px;"></line-chart>
        </div>
        <div class="jiaoyi">
            <img class="guangdian" src="../assets/image/faguangdian@1x.png" alt="">
            <p class="titleLabel">交易类型</p>
            <radar-chart  
                style="
                    position: absolute;
                    display: block;
                    left: 0px;
                    right: 0px;
                    top: 40px;
                    bottom: 5px;"></radar-chart>

        </div>
        <div class="map">
            <img class="guangdian" src="../assets/image/faguangdian@1x.png" alt="">
            <p class="titleLabel">设备分布</p>
            <ChinaMap></ChinaMap>
        </div>
        <div class="shujubiao">
            <img class="guangdian" src="../assets/image/faguangdian@1x.png" alt="">
            <p class="titleLabel">数据统计</p>
            <TableView></TableView>

        </div>
    </div>
    
</template>
<script>
/* eslint-disable */

import ChinaMap from '../components/ChineseMap.vue'
import TableView from '../components/TableView.vue'
import LineChart from '../components/LineChart.vue';
import RadarChart from '../components/RadarChart.vue';
import DatePicker from '../components/DatePicker.vue';
import SegmentComponent from '../components/SegmentComponent.vue';
export default {
    components: {
        ChinaMap,
        TableView,
        RadarChart,
        LineChart,
        SegmentComponent,
        DatePicker
    },
    data () {
        return {
            timer:null,
            nowShijian:'',
            indexData:{
                jiaofeije:0,
                jiaofeibs:0,
                xianjinje:0,
                xianjinbs:0,
                shuakaje:0,
                shuakabs:0,
                saomaje:0,
                saomabs:0,
            },
            
        }
    },
    created() {
        console.log("created")
        this.setTime();
    },
    beforeDestroy(){
        clearInterval(this.timer);// 清除定时器
        this.timer = null;
    },
    mounted: function () {
        console.log("mounted")
        this.init();
    },
    methods: {
        init() {
            
        },
        fetchData(){
            this.$htt
        },
        setTime(){ 
            // 每隔一分钟运行一次保存方法
            this.timer = setInterval(()=>{
                this.dataRefresh();
            },1000)
        },
        dataRefresh(){
            let myDate = new Date()
            let wk = myDate.getDay()  
		    let yy = String(myDate.getFullYear())  
		    let mm = myDate.getMonth() + 1  
		    let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())  
		    let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())  
		    let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())  
		    let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())  
		    let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
		    let week = weeks[wk]  
		    let nowDate = yy + '年' + mm + '月' + dd + '日'
		    let nowTime = hou + ':' + min + ':' + sec  
		    let nowWeek = week
            this.nowShijian = nowDate + ' ' + nowWeek + ' ' + nowTime
        },
    },
}
    
</script>

<style scoped lang="less">
.app{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/kshsybg@1x.png');
    background-repeat: no-repeat;
    background-size: 100%;

    p {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .title {
        position: absolute;
        display: block;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 90px;
        
        .webtitle {
            margin-top: 15px;
            height: 60px;
            font-family: '黑体';            
            font-size: 60px;
            line-height: 60px;
            color: white;
        }
        .date {
            position: absolute;
            display: block;
            left: 15px;
            text-align: left;
            bottom: 15px;
            height: 38px;
            font-family:'Times New Roman', Times, serif;
            font-size: 38px;
            line-height: 38px;
            color: white;
        }
    }
    .index {
        position: absolute;
        display: block;
        // background-color: rgba(22, 1, 1, 0.21);
        background-image: url('../assets/image/indexbg@1x.png');
        background-repeat: no-repeat;
        background-size: 100%;
        left: 0.625%;
        right: 0.625%;
        top:9.35%;
        height: 15.46%;

        .jiaofeidiv {
            position: absolute;
            display: block;
            left: 0.5%;
            top: 2.9vh;
            width: 24%;
            height: calc(100% - 2.9vh);
        }
        .xianjindiv {
            position: absolute;
            display: block;
            left: 25.5%;
            top: 2.9vh;
            width: 24%;
            height: calc(100% - 2.9vh);
        }
        .shuakadiv {
            position: absolute;
            display: block;
            left: 50.5%;
            top: 2.9vh;
            width: 24%;
            height: calc(100% - 2.9vh);
        }
        .saomadiv {
            position: absolute;
            display: block;
            left: 75.5%;
            top: 2.9vh;
            width: 24%;
            height: calc(100% - 2.9vh);
        }
        .divlogo {
            position: absolute;
            display: block;
            left: 1vw;
            top: 20%;
            height: 60%;
        }
        .jelabel {
            position: absolute;
            display: block;
            left: 4.5vw;
            max-width: calc(100% - 4.5vw);
            top: 25%;
            height: 30px;
            line-height: 30px;
            .jelabeltitle{
                color: white;
                font-family: "黑体";
                font-size: 24px;
            }
            .jelabeldata{
                color: #FF8E0C;
                font-family:'Times New Roman', Times, serif;
                font-size: 35px;

            }
            .jelabelunit{
                color: white;
                font-family: "黑体";
                font-size: 20px;
            }
        }
        .bsLabel {
            position: absolute;
            display: block;
            left: 4.5vw;
            max-width: calc(100% - 4.5vw);
            bottom: 25%;
            height: 30px;
            line-height: 30px;
            .bslabeltitle{
                color: white;
                font-family: "黑体";
                font-size: 24px;
            }
            .bslabeldata{
                color: #03D3D1;
                font-family:'Times New Roman', Times, serif;
                font-size: 35px;

            }
            .bslabelunit{
                color: white;
                font-family: "黑体";
                font-size: 20px;
            }
        }
 
 
    }
    .jiankong {
        position: absolute;
        display: block;
        background-color: rgba(22, 1, 1, 0.21);
        left: 0.625%;
        width: 22.86%;
        top:26.3%;
        height: 28.98%;
    }
    .jiaoyi {
        position: absolute;
        display: block;
        background-color: rgba(22, 1, 1, 0.21);
        left: 0.625%;
        width: 22.86%;
        top: 56.76%;
        height: 42.04%;
    }
    .map {
        position: absolute;
        display: block;
        background-color: rgba(22, 1, 1, 0.21);
        left: 24.27%;
        width: 51.56%;
        top:26.3%;
        height: 72.5%;
    } 
    .shujubiao {
        position: absolute;
        display: block;
        background-color: rgba(22, 1, 1, 0.21);
        right: 0.625%;
        width: 22.86%;
        top:26.3%;
        height: 72.5%;
    } 
    .guangdian {
        position: absolute;
        display: block;
        height: 2.5vh;
        left: 0.5vh;
        top: 0.5vh;
    }
    .titleLabel {
        position: absolute;
        display: block;
        height: 2.5vh;
        line-height: 2.5vh;
        font-family:'Times New Roman', Times, serif;
        font-size: 2.5vh;
        left: 3.5vh;
        top: 0.6vh;
        color: white;

    }

}   
   







</style>
